<template>
  <div class="out-all">
    <!-- <span>用水状态--地说图展示</span> -->
    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <waterMeterLeftTree v-if="treeShowOrClose" class="map-left waterMeterLeftTree" @clickClose="clickClose" @areaIf="areaIf"></waterMeterLeftTree>
    <dictionaries :searchData="searchData" :modelType="modelType" @optionData="dictionariesCallBack"></dictionaries>
    <div class="map-right">
      <searchComponentsCss :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :searchData="searchData" @searchCallBack="searchCallBack"></searchComponentsCss>
      <!-- <div class="buttons"> -->
      <!-- <el-button type="primary" size="mini" plain @click="ports('search')" icon="el-icon-search" style="margin:0px 30px 20px 0px; float:right;">搜索</el-button> -->
      <!-- <el-button type="primary" size="mini" plain @click="ports('edit')" icon="el-icon-edit">抄表状态</el-button>
        <el-button type="primary" size="mini" plain @click="ports('bell')" icon="el-icon-bell">异常报警</el-button>-->
      <div class="buttons">
        <div>
          <!-- <el-button
            type="danger"
            size="mini"
            style="background-color: #CD0000;padding:5px;border: 1px solid #CD0000;margin:25px 30px 0px 30px; float:left;"
            >
<i class="el-icon-loading"></i>
            &nbsp;异常报警</el-button> -->
          <el-button type="primary" size="mini" plain icon="el-icon-refresh-right" @click="resetBtnFun" style="margin:25px 30px 20px 0px; float:right;">重置</el-button>
          <el-button type="primary" size="mini" plain @click="ports('search')" icon="el-icon-search" style="margin:25px 30px 20px 0px; float:right;">搜索</el-button>
        </div>
      </div>
      <!-- {{geoCoordMap}} -->
      <div id="mainMap" style="z-index:10;margin:30px" v-loading="loading"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
//import { searchFlWaterMeterInfo } from "@/api/waterMeterInfo/flWaterMeterInfo/index";

//引入组件
import { MapShowCBStatus, MapShowYCStatus } from '@/api/admin/MapShow/index'
import {
  leftTree,
  searchComponentsCss,
  waterMeterLeftTree,
  dictionaries,
} from '@/views/components/FLPage'
import searchComponents from './searchCompontants'
import { CODE_FUN } from '@/views/components/FLPage/fun/cordeOrder/index.js'
export default {
  components: {
    leftTree,
    waterMeterLeftTree,
    searchComponents,
    searchComponentsCss,
    dictionaries,
  },
  data() {
    return {
      modelType: 'table',
      optionsZi: [],
      searchOptionTable: [],
      //
      loading: false,
      // 搜索框的开关
      searchOpen: true,
      dropDownData: false,
      treeShowOrClose: false,
      //搜索框内容
      areaCode: '',
      modelType: 'table',
      nameValue: [
        // { name: "海门", value: 149 },
        // { name: "鄂尔多斯", value: 152 },
        // { name: "招远", value: 132 },
        // { name: "舟山", value: 172 },
        // { name: "齐齐哈尔", value: 184 }
      ],
      geoCoordMap: {
        // 海门: [121.15, 31.89],
        // 鄂尔多斯: [109.781327, 39.608266],
        // 招远: [120.38, 37.35],
        // 舟山: [122.207216, 29.985295],
        // 齐齐哈尔: [123.97, 47.33]
      },
      //后端数据
      topData: {},
      //
      mapData: [],
      //搜索
      searchData: [
        {
          EN: 'customerNo',
          CN: '客户编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'waterNo',
          CN: '水表编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'setupAddress',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'useMonth',
          CN: '用水月份',
          value: '',
          type: 'dateMonth',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'useStatus',
          CN: '异常状态',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{1,20}$',
          err: '长度为1-20的所有字符!',
          typeGroupCode: 'ycStatus',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
    }
  },
  async mounted() {
    let op = await CODE_FUN('reading_status')
    for (let i = 0; i < this.searchData.length; i++) {
      if (this.searchData[i].EN == 'cbStatus') {
        this.searchData[i].option = op
      }
    }
    await this.ports('edit')
  },
  methods: {
    // 重置
    resetBtnFun() {},
    //画图配置
    draw() {
      var mainMap = document.getElementById('mainMap')
      var DCmainMap = echarts.init(mainMap)
      var option = {
        backgroundColor: 'rgba(255, 250, 250,.6)',
        title: {
          text: '地图展示',
          // subtext: "data from PM25.in",
          // sublink: "http://www.pm25.in",
          left: 'center',
        },
        // tooltip: {
        //     trigger: "none",
        // },
        bmap: {
          center: Object.keys(this.geoCoordMap)['length']
            ? this.geoCoordMap[Object.keys(this.geoCoordMap)[0]]
            : [116.98, 36.67],
          zoom: Object.keys(this.geoCoordMap)['length'] ? 11 : 9,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: 'water',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1',
                },
              },
              {
                featureType: 'land',
                elementType: 'all',
                stylers: {
                  color: '#f3f3f3',
                },
              },
              {
                featureType: 'railway',
                elementType: 'all',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'highway',
                elementType: 'all',
                stylers: {
                  color: '#fdfdfd',
                },
              },
              {
                featureType: 'highway',
                elementType: 'labels',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'arterial',
                elementType: 'geometry',
                stylers: {
                  color: '#fefefe',
                },
              },
              {
                featureType: 'arterial',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#fefefe',
                },
              },
              {
                featureType: 'poi',
                elementType: 'all',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'green',
                elementType: 'all',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'subway',
                elementType: 'all',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'manmade',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1',
                },
              },
              {
                featureType: 'local',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1',
                },
              },
              {
                featureType: 'arterial',
                elementType: 'labels',
                stylers: {
                  visibility: 'off',
                },
              },
              {
                featureType: 'boundary',
                elementType: 'all',
                stylers: {
                  color: '#fefefe',
                },
              },
              {
                featureType: 'building',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1',
                },
              },
              {
                featureType: 'label',
                elementType: 'labels.text.fill',
                stylers: {
                  color: '#999999',
                },
              },
            ],
          },
        },
        series: [
          {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: this.convertData(this.nameValue),
            symbolSize: function (val) {
              return val[2] / 10
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false,
            },
            // itemStyle: {
            //     color: "#C90010",
            // },
            // emphasis: {
            //     label: {
            //         show: true,
            //     },
            // },
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: this.convertData(
              this.nameValue
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10
            },
            encode: {
              value: 2,
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true,
            },
            itemStyle: {
              color: '#C90010',
              shadowBlur: 10,
              shadowColor: '#C90010',
            },
            zlevel: 1,
          },
        ],
      }

      function DRAW() {
        setInterval(DCmainMap.setOption(option, true), 2000)
      }
      DRAW()
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      console.log(a, b, 66666666)
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      // this.forData(this.currentPage, this.pagesize, this.suoS);
    },

    //抄表状态/异常报警
    async ports(val) {
      this.nameValue = []
      this.geoCoordMap = {}
      if (val == 'edit') {
        //抄表状态搜索调用此接口
        console.log('抄表状态搜索调用此接口')
        this.topData['communityCode'] = JSON.parse(
          JSON.stringify(this.areaCode)
        )
        this.loading = true

        await MapShowCBStatus(this.topData).then((Response) => {
          console.log(Response, 359)
          let num = 0
          let numArr = Response.data
          for (let i = 0; i < numArr.length; i++) {
            const element = numArr[i]
            // if (element.waterNo == '3654697123') {
            //     }
            console.log(
              element.waterNo,
              element.longitude,
              element.dimension,
              358
            )
          }
          if (Response['data']['length']) {
            let R_data = Response.data
            for (let t = 0; t < R_data.length; t++) {
              if (R_data[t]['longitude'] && R_data[t]['dimension']) {
                let nam = {
                  name: '',
                  value: 100,
                }
                nam.name = R_data[t]['waterNo']
                this.nameValue.push(nam)
                this.geoCoordMap[nam.name] = [
                  R_data[t]['longitude'],
                  R_data[t]['dimension'],
                ]
              }
            }
            console.log(this.nameValue, 555)
            // this.geoCoordMap  做去重处理
            let sortMap = {}
            for (const key in this.geoCoordMap) {
              const element = this.geoCoordMap[key]
              const mapKey = element[0] + '+' + element[1]
              if (sortMap[mapKey]) {
                for (let i = 0; i < this.nameValue.length; i++) {
                  let element1 = this.nameValue[i]
                  if (element1.name == key) {
                    this.nameValue.splice(i, 1)
                  } else if (element1.name == sortMap[mapKey]) {
                    this.nameValue[i]['name'] =
                      this.nameValue[i]['name'] + ' , ' + key
                  }
                }
                sortMap[mapKey] = sortMap[mapKey] + ' , ' + key
              } else {
                sortMap[mapKey] = key
              }
            }
            console.log(sortMap, 666)
            console.log(this.nameValue, 666)
            let clearMap = {}
            for (const key in sortMap) {
              const element = sortMap[key]
              let keyArr = key.split('+')
              clearMap[element] = keyArr
            }
            console.log(clearMap, 777)
            this.geoCoordMap = clearMap
          } else {
            this.$notify({
              title: '抄表状态',
              message: '没有抄表状态数据',
              type: 'success',
            })
          }

          this.loading = false
        })
        await this.draw()
      } else if (val == 'bell') {
        //异常报警搜索调用此接口
        console.log('异常报警搜索调用此接口')
        this.topData['communityCode'] = JSON.parse(
          JSON.stringify(this.areaCode)
        )
        this.loading = true
        MapShowYCStatus(this.topData).then((Response) => {
          //this.mapData=Response.data
          let R_data = Response.data
          if (Response['data']['length']) {
            for (let i = 0; i < R_data.length; i++) {
              let nam = {
                name: '',
                value: 100,
              }
              nam.name = R_data[i]['waterNo']
              this.nameValue.push(nam)
              this.geoCoordMap[nam.name] = [
                R_data[i]['longitude'],
                R_data[i]['dimension'],
              ]
            }
          } else {
            this.$notify({
              title: '异常报警',
              message: '没有异常数据',
              type: 'success',
            })
          }
          console.log('**********************************************2')
          console.log(this.nameValue)

          this.loading = false
        })
        await this.draw()
      } else if (val == 'search') {
        //抄表状态搜索调用此接口
        console.log('抄表状态搜索调用此接口')
        this.topData['communityCode'] = JSON.parse(
          JSON.stringify(this.areaCode)
        )
        this.loading = true

        await MapShowCBStatus(this.topData).then((Response) => {
          if (Response['data']['length']) {
            let R_data = Response.data
            console.log(R_data, 888)
            for (let t = 0; t < R_data.length; t++) {
              if (R_data[t]['longitude'] && R_data[t]['dimension']) {
                let nam = {
                  name: '',
                  value: 100,
                }
                nam.name = R_data[t]['waterNo']
                this.nameValue.push(nam)
                console.log('*******************************')
                console.log(this.nameValue)
                this.geoCoordMap[nam.name] = [
                  R_data[t]['longitude'],
                  R_data[t]['dimension'],
                ]
                console.log(this.geoCoordMap, 999)
              }
            }
            console.log(this.nameValue, 555)
            // this.geoCoordMap  做去重处理
            let sortMap = {}
            for (const key in this.geoCoordMap) {
              const element = this.geoCoordMap[key]
              const mapKey = element[0] + '+' + element[1]
              if (sortMap[mapKey]) {
                for (let i = 0; i < this.nameValue.length; i++) {
                  let element1 = this.nameValue[i]
                  if (element1.name == key) {
                    this.nameValue.splice(i, 1)
                  } else if (element1.name == sortMap[mapKey]) {
                    this.nameValue[i]['name'] =
                      this.nameValue[i]['name'] + ' , ' + key
                  }
                }
                sortMap[mapKey] = sortMap[mapKey] + ' , ' + key
              } else {
                sortMap[mapKey] = key
              }
            }
            console.log(sortMap, 666)
            console.log(this.nameValue, 666)
            let clearMap = {}
            for (const key in sortMap) {
              const element = sortMap[key]
              let keyArr = key.split('+')
              clearMap[element] = keyArr
            }
            console.log(clearMap, 777)
            this.geoCoordMap = clearMap
          } else {
            this.$notify({
              title: '提示',
              message: '没有数据',
              type: 'success',
            })
          }

          this.loading = false
        })
        await this.draw()
      }
    },
    convertData() {
      var res = []
      for (var i = 0; i < this.nameValue.length; i++) {
        var geoCoord = this.geoCoordMap[this.nameValue[i].name]
        if (geoCoord) {
          res.push({
            name: this.nameValue[i].name,
            value: geoCoord.concat(this.nameValue[i].value),
          })
        }
      }
      return res
    },
    //搜索
    searchCallBack(seach) {
      let obj = {}
      for (let i = 0; i < seach.length; i++) {
        obj[seach[i]['EN']] = seach[i]['value']
      }
      this.topData = obj
      console.log(this.topData)
    },
    //抄表状态搜索
    CBforData(page, size, searchData) {},
    //异常报警搜索
    YCforData(page, size, searchData) {},
    clickClose(res) {
      // console.log(res,999);
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    areaIf(areaCode) {
      console.log(areaCode)

      this.areaCode = areaCode
      // this.forData(this.currentPage, this.pagesize, this.suoS);
    },
  },
}
</script>

<style scoped src="@/styles/allCssP.css"></style><style lang="scss" scoped>
.out-all {
  display: flex;

  // .map-left {
  // width: 200px;
  // }

  .map-right {
    flex: 100;

    #mainMap {
      height: 500px;
    }
  }
}

.waterMeterLeftTree {
  border: 1px soild #ccc;
}

.leftTreetitleButton {
  margin-top: 10px;
  border: 0;
  height: 32px;
}
.anchorBL {
  display: none !important; //地图左下角的文字链接
}
</style>
